<template>
<div>
  <el-tabs v-model="activeName">
    <el-tab-pane name="first">
       <span slot="label">
          评论<el-badge  :value="200" :max="99" ></el-badge>
       </span>
      <el-container>
        <el-aside style="width: 200px;height: 800px">
          <el-menu>
            <el-menu-item>好评
              <el-badge  :value="200" :max="99" ></el-badge>
            </el-menu-item>
            <el-menu-item>中评
              <el-badge  :value="200" :max="99" ></el-badge>
            </el-menu-item>
            <el-menu-item>差评
              <el-badge  :value="200" :max="99" ></el-badge>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>

        </el-main>
      </el-container>
    </el-tab-pane>
    <el-tab-pane name="second">
       <span slot="label">
          信息<el-badge  :value="200" :max="99" ></el-badge>
       </span>
      <el-container>
        <el-aside style="width: 200px;height: 800px">
          <el-menu v-for="item in people">
            <el-menu-item>
              <img :src="item.pic" class="headImg">
              {{item.name}}
              <el-badge  :value="200" :max="99" ></el-badge>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="margin: 0;padding: 0">
          <div style="width: 600px">
            <div class="chatHead"></div>
            <div class="chatContent"></div>
            <div class="chatInput"></div>
          </div>
        </el-main>
      </el-container>
    </el-tab-pane>
    <el-tab-pane name="third">
       <span slot="label">
          通知<el-badge  :value="200" :max="99" ></el-badge>
       </span>
    </el-tab-pane>

  </el-tabs>
</div>
</template>

<script>
export default {
  name: "message",
  data(){
    return{
      activeName:'second',
      people:[
        {
          pic:'https://img0.baidu.com/it/u=1942253063,3807598283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          name:'Twins',
        },
        {
          pic:'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          name:'Yep',
        },
        {
          pic:'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          name:'顾客',
        }
      ]
    }
  },
}
</script>

<style scoped>
.headImg{
  border-radius: 30px;
  width: 50px;
  height: 50px;
}
.chatHead{
  background-color: #aaaaaa;
  height: 50px;
}
.chatContent{
  background-color: bisque;
  height:350px;
}
.chatInput{
  background-color: aqua;
  height: 100px;
}
</style>
